<template>
  <div>
    <el-form
      ref="roleFormRef"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item
        label="学科"
        prop="field101"
      >
        <el-select
          v-model="formData.field101"
          placeholder="请选择下拉选择学科"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field101Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="目录"
        prop="field102"
      >
        <el-select
          v-model="formData.field102"
          placeholder="请选择目录"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field102Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="企业"
        prop="field103"
      >
        <el-select
          v-model="formData.field103"
          placeholder="请选择企业"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field103Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="城市"
        prop="field106"
      >
        <el-select
          v-model="formData.field106"
          placeholder="请选择城市"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field106Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="方向"
        prop="field105"
      >
        <el-select
          v-model="formData.field105"
          placeholder="请选择方向"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field105Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="题型"
        prop="field107"
      >
        <el-radio-group
          v-model="formData.field107"
          size="medium"
        >
          <el-radio
            v-for="(item, index) in field107Options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="难度"
        prop="field108"
      >
        <el-radio-group
          v-model="formData.field108"
          size="medium"
        >
          <el-radio
            v-for="(item, index) in field108Options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="题干"
        prop="field110"
      >
        <el-input
          v-model="formData.field110"
          type="textarea"
          placeholder="请输入题干"
          :autosize="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="解析视频"
        prop="field112"
      >
        <el-input
          v-model="formData.field112"
          placeholder="请输入解析视频"
          clearable
          :style="{width: '100%'}"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="答案解析"
        prop="field113"
      >
        <el-input
          v-model="formData.field113"
          type="textarea"
          placeholder="请输入答案解析"
          :autosize="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="题目备注"
        prop="field115"
      >
        <el-input
          v-model="formData.field115"
          type="textarea"
          placeholder="请输入题目备注"
          :autosize="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="试题标签"
        prop="field116"
      >
        <el-select
          v-model="formData.field116"
          placeholder="请选择试题标签"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in field116Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="large">
        <el-button
          type="primary"
          @click="submitForm"
        >提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data () {
    return {
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field106: undefined,
        field105: undefined,
        field107: 2,
        field108: undefined,
        field110: undefined,
        field112: undefined,
        field113: undefined,
        field115: undefined,
        field116: undefined
      },
      rules: {
        field101: [{
          required: true,
          message: '请选择下拉选择学科',
          trigger: 'change'
        }],
        field102: [{
          required: true,
          message: '请选择目录',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: '请选择企业',
          trigger: 'change'
        }],
        field106: [{
          required: true,
          message: '请选择城市',
          trigger: 'change'
        }],
        field105: [{
          required: true,
          message: '请选择方向',
          trigger: 'change'
        }],
        field107: [{
          required: true,
          message: '题型不能为空',
          trigger: 'change'
        }],
        field108: [{
          required: true,
          message: '难度不能为空',
          trigger: 'change'
        }],
        field110: [{
          required: true,
          message: '请输入题干',
          trigger: 'blur'
        }],
        field112: [],
        field113: [{
          required: true,
          message: '请输入答案解析',
          trigger: 'blur'
        }],
        field115: [{
          required: true,
          message: '请输入题目备注',
          trigger: 'blur'
        }],
        field116: [{
          required: true,
          message: '请选择试题标签',
          trigger: 'change'
        }]
      },
      field101Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field102Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field103Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field106Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field105Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field107Options: [{
        label: '单选',
        value: 1
      }, {
        label: '多选',
        value: 2
      }, {
        label: '简答',
        value: 3
      }],
      field108Options: [{
        label: '简单',
        value: 1
      }, {
        label: '一般',
        value: 2
      }, {
        label: '困难',
        value: 3
      }],
      field116Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    submitForm () {
      this.$refs.roleFormRef.validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm () {
      this.$refs.roleFormRef.resetFields()
    }
  }
}

</script>
<style>
</style>
